<template>
<div class="login">
    <form name = 'form' action="">
      <div>
        <label>工号</label>
        <el-input v-model="worknum" style="width: 150px;" minlength="1" placeholder="请输入工号"></el-input>
      </div>
      <div>
        <label>密码</label>
        <el-input placeholder="请输入密码" style="width: 150px;" minlength="1" v-model="passwd" show-password></el-input>
      </div>
    </form>
    <div>
        <el-button style="margin-right: 25px;" @click="loginCheck" type="primary">登录</el-button>
        <el-button type="primary" >取消</el-button>
    </div>

    <!-- <tag2 v-if="isShow" :workn="workNum"></tag2> -->
</div>
</template>

<script>
import tag2 from '../components/tag2.vue'
import {mapState} from 'vuex'
export default {
  name: 'HelloWorld',
  components: {
    tag2
  },
  data () {
    return {
      worknum: '',
      passwd: '',
      isShow: false,
      workNum: 'aaa',
      bgStyle: ''  // 当前背景样式
    }
  },
  methods: {
    chuanzhi () {
      this.$store.commit({
        type: 'transmit',
        num: this.worknum
      })
    },
    // 登陆校验
    loginCheck() {
      var that = this;
      if (this.worknum == '') {
        this.$message({
          message: '工号不能为空',
          type: 'warning'
        });
        return;
      }
      if (this.passwd == '') {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
        return;
      }
      this.chuanzhi()
      this.$http.post('/api/admin/checkAdmin', {
        worknum: that.worknum,
        passwd: that.passwd
      }).then((res) => {
        console.log('登陆返回结果', res);
        if (res.bodyText !== '[]') {
          that.$store.commit({
            type: 'transmit',
            num: this.worknum
          })
          that.$router.push('/tag2');
        } else {
          that.$message.error('登陆账号或密码错误，请确认');
        }
      })
    },
    // 根据时间改变背景图
    changeBgByTime() {
      var nowHour = new Date().getHours();
      console.log('当前时刻', nowHour);
      console.log('时刻划分', this.timeDivision[0]);
      // this.$message.success('当前时刻', nowHour);
      // this.$message.success('时刻划分', this.timeDivision[0]);
      // if(this.timeDivision[0] ) {

      // }
      // this.bgStyle = 
    }
  },
  computed : mapState({
    timeDivision: (state) => state.timeDivision
  }),
  mounted() {
    this.changeBgByTime(); // 时间判断
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
el-input {
  width :120px;
}
label {
  margin-right: 30px;
}
div {
  margin-top: 20px;
}
</style>
